<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>API Reference | Vue Router</title>
    <meta name="description" content="The official router for Vue.js.">
    <link rel="stylesheet" href="static/css/style.720cf281.css">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/Home.50302e7a.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.4cf347f1.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.8de93204.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/AlgoliaSearchBox.80d79d6b.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/app.47b74ea6.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/api_index.md.d2104c47.lean.js">
    
    <link rel="icon" href="static/picture/logo.png">
  <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
  <script src="static/js/thesemetrics@latest.js" async=""></script>
  <meta name="twitter:title" content="API Reference | Vue Router">
  <meta property="og:title" content="API Reference | Vue Router">
  </head>
  <body>
    <div id="app"><div class="main-container" data-v-46b24580=""><!----><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="index6.html" aria-label="Vue Router, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vue Router</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="index7.html" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="index9.html" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index3.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="index7.html" data-v-b8818f8c="">Guide <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="" data-v-b8818f8c="">API Reference <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="index9.html" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">Changelog <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">Languages</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="index3.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--[--><div class="sponsors sponsors-top" data-v-46b24580=""><span data-v-46b24580="">Platinum Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="#router-link-props">&lt;router-link&gt; Props</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#to">to</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#replace">replace</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#active-class">active-class</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#aria-current-value">aria-current-value</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#custom">custom</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#exact-active-class">exact-active-class</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-link-s-v-slot">&lt;router-link&gt;&#39;s v-slot</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#example-applying-active-class-to-outer-element">Example: Applying Active Class to Outer Element</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-view-props">&lt;router-view&gt; Props</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#name">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#route">route</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-view-s-v-slot">&lt;router-view&gt;&#39;s v-slot</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#createrouter">createRouter</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#parameters">Parameters</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#createwebhistory">createWebHistory</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#parameters-1">Parameters</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#examples">Examples</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#createwebhashhistory">createWebHashHistory</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#parameters-2">Parameters</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#examples-1">Examples</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#creatememoryhistory">createMemoryHistory</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#parameters-3">Parameters</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#returns">Returns</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#navigationfailuretype">NavigationFailureType</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#members">Members</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#start-location">START_LOCATION</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#composition-api">Composition API</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#onbeforerouteleave">onBeforeRouteLeave</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#onbeforerouteupdate">onBeforeRouteUpdate</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#uselink">useLink</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#useroute">useRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#userouter">useRouter</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#typescript">TypeScript</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-properties">Router Properties</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#currentroute">currentRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#options">options</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#router-methods">Router Methods</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#addroute">addRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#addroute-1">addRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#aftereach">afterEach</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#back">back</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeeach">beforeEach</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeresolve">beforeResolve</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#forward">forward</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#getroutes">getRoutes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#go">go</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#hasroute">hasRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#isready">isReady</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#onerror">onError</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#push">push</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#removeroute">removeRoute</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#replace-1">replace</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#resolve">resolve</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routeroptions">RouterOptions</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#history">history</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#linkactiveclass">linkActiveClass</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#linkexactactiveclass">linkExactActiveClass</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#parsequery">parseQuery</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routes">routes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#scrollbehavior">scrollBehavior</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#stringifyquery">stringifyQuery</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routerecordraw">RouteRecordRaw</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#path">path</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#redirect">redirect</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#children">children</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#alias">alias</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#name-1">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeenter">beforeEnter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#props">props</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#sensitive">sensitive</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#strict">strict</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#meta">meta</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routerecordnormalized">RouteRecordNormalized</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#aliasof">aliasOf</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#beforeenter-1">beforeEnter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#children-1">children</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#components">components</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#meta-1">meta</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#name-2">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#path-1">path</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#props-1">props</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#redirect-1">redirect</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routelocationraw">RouteLocationRaw</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routelocation">RouteLocation</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#routelocationnormalized">RouteLocationNormalized</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#fullpath">fullPath</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#hash">hash</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#query">query</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#matched">matched</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#meta-2">meta</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#name-3">name</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#params">params</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#path-2">path</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#redirectedfrom">redirectedFrom</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#navigationfailure">NavigationFailure</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#from">from</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#to-1">to</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#type">type</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#navigationguard">NavigationGuard</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#component-injections">Component Injections</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#component-injected-properties">Component Injected Properties</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#component-enabled-options">Component Enabled Options</a><!----></li></ul></li><!--]--></ul><!--[--><!--[--><div class="sponsors" data-v-46b24580=""><span data-v-46b24580="">Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" ref_key="el" data-v-5941b830=""></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="api-reference" tabindex="-1">API Reference <a class="header-anchor" href="#api-reference" aria-hidden="true">#</a></h1><h2 id="router-link-props" tabindex="-1"><code>&lt;router-link&gt;</code> Props <a class="header-anchor" href="#router-link-props" aria-hidden="true">#</a></h2><h3 id="to" tabindex="-1">to <a class="header-anchor" href="#to" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocationraw"><code>RouteLocationRaw</code></a></p></li><li><p><strong>Details</strong>:</p><p>Denotes the target route of the link. When clicked, the value of the <code>to</code> prop will be passed to <code>router.push()</code> internally, so it can either be a <code>string</code> or a <a href="#routelocationraw">route location object</a>.</p></li></ul><div class="language-html"><pre><code><span class="token comment">&lt;!-- literal string --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- renders to --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- javascript expression using `v-bind` --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&#39;</span>/home<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- same as above --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ path: <span class="token punctuation">&#39;</span>/home<span class="token punctuation">&#39;</span> }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- named route --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ name: <span class="token punctuation">&#39;</span>user<span class="token punctuation">&#39;</span>, params: { userId: <span class="token punctuation">&#39;</span>123<span class="token punctuation">&#39;</span> }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>User<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- with query, resulting in `/register?plan=private` --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ path: <span class="token punctuation">&#39;</span>/register<span class="token punctuation">&#39;</span>, query: { plan: <span class="token punctuation">&#39;</span>private<span class="token punctuation">&#39;</span> }}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Register
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="replace" tabindex="-1">replace <a class="header-anchor" href="#replace" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>boolean</code></p></li><li><p><strong>Default</strong>: <code>false</code></p></li><li><p><strong>Details</strong>:</p><p>Setting <code>replace</code> prop will call <code>router.replace()</code> instead of <code>router.push()</code> when clicked, so the navigation will not leave a history record.</p></li></ul><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/abc<span class="token punctuation">&quot;</span></span> <span class="token attr-name">replace</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="active-class" tabindex="-1">active-class <a class="header-anchor" href="#active-class" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Default</strong>: <code>&quot;router-link-active&quot;</code> (or global <a href="#linkactiveclass"><code>linkActiveClass</code></a>)</p></li><li><p><strong>Details</strong>:</p><p>Class to apply on the rendered <code>&lt;a&gt;</code> when the link is active.</p></li></ul><h3 id="aria-current-value" tabindex="-1">aria-current-value <a class="header-anchor" href="#aria-current-value" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>&#39;page&#39; | &#39;step&#39; | &#39;location&#39; | &#39;date&#39; | &#39;time&#39; | &#39;true&#39; | &#39;false&#39;</code> (<code>string</code>)</p></li><li><p><strong>Default</strong>: <code>&quot;page&quot;</code></p></li><li><p><strong>Details</strong>:</p><p>Value passed to the attribute <code>aria-current</code> when the link is exactly active.</p></li></ul><h3 id="custom" tabindex="-1">custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>boolean</code></p></li><li><p><strong>Default</strong>: <code>false</code></p></li><li><p><strong>Details</strong>:</p><p>Whether <code>&lt;router-link&gt;</code> should not wrap its content in an <code>&lt;a&gt;</code> element. Useful when using <a href="#router-link-s-v-slot"><code>v-slot</code></a> to create a custom RouterLink. By default, <code>&lt;router-link&gt;</code> will render its content wrapped in an <code>&lt;a&gt;</code> element, even when using <code>v-slot</code>. Passing the <code>custom</code> prop, removes that behavior.</p></li><li><p><strong>Examples</strong>:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">custom</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ navigate, href, route }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>href<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ route.fullPath }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Renders <code>&lt;a href=&quot;/home&quot;&gt;/home&lt;/a&gt;</code>.</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ route }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ route.fullPath }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Renders <code>&lt;a href=&quot;/home&quot;&gt;&lt;span&gt;/home&lt;/span&gt;&lt;/a&gt;</code>.</p></li></ul><h3 id="exact-active-class" tabindex="-1">exact-active-class <a class="header-anchor" href="#exact-active-class" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Default</strong>: <code>&quot;router-link-exact-active&quot;</code> (or global <a href="#linkexactactiveclass"><code>linkExactActiveClass</code></a>)</p></li><li><p><strong>Details</strong>:</p><p>Class to apply on the rendered <code>&lt;a&gt;</code> when the link is exact active.</p></li></ul><h2 id="router-link-s-v-slot" tabindex="-1"><code>&lt;router-link&gt;</code>&#39;s <code>v-slot</code> <a class="header-anchor" href="#router-link-s-v-slot" aria-hidden="true">#</a></h2><p><code>&lt;router-link&gt;</code> exposes a low level customization through a <a href="javascript:;" target="_blank" rel="noopener noreferrer">scoped slot</a>. This is a more advanced API that primarily targets library authors but can come in handy for developers as well, to build a custom component like a <em>NavLink</em> or other.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Remember to pass the <code>custom</code> option to <code>&lt;router-link&gt;</code> to prevent it from wrapping its content inside of an <code>&lt;a&gt;</code> element.</p></div><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/about<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">custom</span>
  <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ href, route, navigate, isActive, isExactActive }<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLink</span> <span class="token attr-name">:active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isActive<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>href<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    {{ route.fullPath }}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLink</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><code>href</code>: resolved url. This would be the <code>href</code> attribute of an <code>&lt;a&gt;</code> element. It contains the <code>base</code> if any was provided.</li><li><code>route</code>: resolved normalized location.</li><li><code>navigate</code>: function to trigger the navigation. <strong>It will automatically prevent events when necessary</strong>, the same way <code>router-link</code> does, e.g. <code>ctrl</code> or <code>cmd</code> + click will still be ignored by <code>navigate</code>.</li><li><code>isActive</code>: <code>true</code> if the <a href="#active-class">active class</a> should be applied. Allows to apply an arbitrary class.</li><li><code>isExactActive</code>: <code>true</code> if the <a href="#exact-active-class">exact active class</a> should be applied. Allows to apply an arbitrary class.</li></ul><h3 id="example-applying-active-class-to-outer-element" tabindex="-1">Example: Applying Active Class to Outer Element <a class="header-anchor" href="#example-applying-active-class-to-outer-element" aria-hidden="true">#</a></h3><p>Sometimes we may want the active class to be applied to an outer element rather than the <code>&lt;a&gt;</code> element itself, in that case, you can wrap that element inside a <code>router-link</code> and use the <code>v-slot</code> properties to create your link:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span>
  <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/foo<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">custom</span>
  <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ href, route, navigate, isActive, isExactActive }<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>
    <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[isActive &amp;&amp; <span class="token punctuation">&#39;</span>router-link-active<span class="token punctuation">&#39;</span>, isExactActive &amp;&amp; <span class="token punctuation">&#39;</span>router-link-exact-active<span class="token punctuation">&#39;</span>]<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>href<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>navigate<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ route.fullPath }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>If you add a <code>target=&quot;_blank&quot;</code> to your <code>a</code> element, you must omit the <code>@click=&quot;navigate&quot;</code> handler.</p></div><h2 id="router-view-props" tabindex="-1"><code>&lt;router-view&gt;</code> Props <a class="header-anchor" href="#router-view-props" aria-hidden="true">#</a></h2><h3 id="name" tabindex="-1">name <a class="header-anchor" href="#name" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Default</strong>: <code>&quot;default&quot;</code></p></li><li><p><strong>Details</strong>:</p><p>When a <code>&lt;router-view&gt;</code> has a <code>name</code>, it will render the component with the corresponding name in the matched route record&#39;s <code>components</code> option.</p></li><li><p><strong>See Also</strong>: <a href="named-views1.html">Named Views</a></p></li></ul><h3 id="route" tabindex="-1">route <a class="header-anchor" href="#route" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>Details</strong>:</p><p>A route location that has all of its component resolved (if any was lazy loaded) so it can be displayed.</p></li></ul><h2 id="router-view-s-v-slot" tabindex="-1"><code>&lt;router-view&gt;</code>&#39;s <code>v-slot</code> <a class="header-anchor" href="#router-view-s-v-slot" aria-hidden="true">#</a></h2><p><code>&lt;router-view&gt;</code> exposes a <code>v-slot</code> API mainly to wrap your route components with <code>&lt;transition&gt;</code> and <code>&lt;keep-alive&gt;</code> components.</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ Component, route }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>route.meta.transition || <span class="token punctuation">&#39;</span>fade<span class="token punctuation">&#39;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>out-in<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>suspense</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#default</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>component</span>
            <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Component<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>route.meta.usePathKey ? route.path : undefined<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#fallback</span><span class="token punctuation">&gt;</span></span> Loading... <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>suspense</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><code>Component</code>: VNodes to be passed to a <code>&lt;component&gt;</code>&#39;s <code>is</code> prop.</li><li><code>route</code>: resolved normalized <a href="#routelocationnormalized">route location</a>.</li></ul><h2 id="createrouter" tabindex="-1">createRouter <a class="header-anchor" href="#createrouter" aria-hidden="true">#</a></h2><p>Creates a Router instance that can be used by a Vue app. Check the <a href="#routeroptions"><code>RouterOptions</code></a> for a list of all the properties that can be passed.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createRouter</span><span class="token punctuation">(</span>options<span class="token operator">:</span> RouterOptions<span class="token punctuation">)</span><span class="token operator">:</span> Router
</code></pre></div><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-hidden="true">#</a></h3><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>options</td><td><a href="#routeroptions">RouterOptions</a></td><td>Options to initialize the router</td></tr></tbody></table><h2 id="createwebhistory" tabindex="-1">createWebHistory <a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a></h2><p>Creates an HTML5 history. Most common history for single page applications. The application must be served through the http protocol.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span>base<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> RouterHistory
</code></pre></div><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-hidden="true">#</a></h3><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>base</td><td><code>string</code></td><td>optional base to provide. Useful when the application is hosted inside of a folder like <code>https://example.com/folder/</code></td></tr></tbody></table><h3 id="examples" tabindex="-1">Examples <a class="header-anchor" href="#examples" aria-hidden="true">#</a></h3><div class="language-js"><pre><code><span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// No base, the app is hosted at the root of the domain `https://example.com`</span>
<span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/folder/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// gives a url of `https://example.com/folder/`</span>
</code></pre></div><h2 id="createwebhashhistory" tabindex="-1">createWebHashHistory <a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a></h2><p>Creates a hash history. Useful for web applications with no host (e.g. <code>file://</code>) or when configuring a server to handle any URL isn&#39;t an option. <strong>Note you should use <a href="#createwebhistory"><code>createWebHistory</code></a> if SEO matters to you</strong>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createWebHashHistory</span><span class="token punctuation">(</span>base<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> RouterHistory
</code></pre></div><h3 id="parameters-2" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-2" aria-hidden="true">#</a></h3><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>base</td><td><code>string</code></td><td>optional base to provide. Defaults to <code>location.pathname + location.search</code>. If there is a <code>&lt;base&gt;</code> tag in the <code>head</code>, its value will be ignored in favor of this parameter <strong>but note it affects all the history.pushState() calls</strong>, meaning that if you use a <code>&lt;base&gt;</code> tag, its <code>href</code> value <strong>has to match this parameter</strong> (ignoring anything after the <code>#</code>)</td></tr></tbody></table><h3 id="examples-1" tabindex="-1">Examples <a class="header-anchor" href="#examples-1" aria-hidden="true">#</a></h3><div class="language-js"><pre><code><span class="token comment">// at https://example.com/folder</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// gives a url of `https://example.com/folder#`</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/folder/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// gives a url of `https://example.com/folder/#`</span>
<span class="token comment">// if the `#` is provided in the base, it won&#39;t be added by `createWebHashHistory`</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/folder/#/app/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// gives a url of `https://example.com/folder/#/app/`</span>
<span class="token comment">// you should avoid doing this because it changes the original url and breaks copying urls</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/other-folder/&#39;</span><span class="token punctuation">)</span> <span class="token comment">// gives a url of `https://example.com/other-folder/#`</span>

<span class="token comment">// at file:///usr/etc/folder/index.html</span>
<span class="token comment">// for locations with no `host`, the base is ignored</span>
<span class="token function">createWebHashHistory</span><span class="token punctuation">(</span><span class="token string">&#39;/iAmIgnored&#39;</span><span class="token punctuation">)</span> <span class="token comment">// gives a url of `file:///usr/etc/folder/index.html#`</span>
</code></pre></div><h2 id="creatememoryhistory" tabindex="-1">createMemoryHistory <a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a></h2><p>Creates a in-memory based history. The main purpose of this history is to handle SSR. It starts in a special location that is nowhere. If the user is not on a browser context, it&#39;s up to them to replace that location with the starter location by either calling <code>router.push()</code> or <code>router.replace()</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">createMemoryHistory</span><span class="token punctuation">(</span>base<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> RouterHistory
</code></pre></div><h3 id="parameters-3" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-3" aria-hidden="true">#</a></h3><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>base</td><td><code>string</code></td><td>Base applied to all urls, defaults to &#39;/&#39;</td></tr></tbody></table><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-hidden="true">#</a></h3><p>A history object that can be passed to the router constructor</p><h2 id="navigationfailuretype" tabindex="-1">NavigationFailureType <a class="header-anchor" href="#navigationfailuretype" aria-hidden="true">#</a></h2><p>Enumeration with all possible types for navigation failures. Can be passed to <a href="#isnavigationfailure">isNavigationFailure</a> to check for specific failures. <strong>Never use any of the numerical values</strong>, always use the variables like <code>NavigationFailureType.aborted</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">enum</span> NavigationFailureType
</code></pre></div><h3 id="members" tabindex="-1">Members <a class="header-anchor" href="#members" aria-hidden="true">#</a></h3><table><thead><tr><th>Member</th><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>aborted</td><td>4</td><td>An aborted navigation is a navigation that failed because a navigation guard returned <code>false</code> or called <code>next(false)</code></td></tr><tr><td>cancelled</td><td>8</td><td>A cancelled navigation is a navigation that failed because a more recent navigation finished started (not necessarily finished).</td></tr><tr><td>duplicated</td><td>16</td><td>A duplicated navigation is a navigation that failed because it was initiated while already being at the exact same location.</td></tr></tbody></table><h2 id="start-location" tabindex="-1">START_LOCATION <a class="header-anchor" href="#start-location" aria-hidden="true">#</a></h2><ul><li><p><strong>Type</strong>: <a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>Details</strong>:</p><p>Initial route location where the router is. Can be used in navigation guards to differentiate the initial navigation.</p><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">START_LOCATION</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue-router&#39;</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>from <span class="token operator">===</span> <span class="token constant">START_LOCATION</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// initial navigation</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li></ul><h2 id="composition-api" tabindex="-1">Composition API <a class="header-anchor" href="#composition-api" aria-hidden="true">#</a></h2><h3 id="onbeforerouteleave" tabindex="-1">onBeforeRouteLeave <a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a></h3><p>Add a navigation guard that triggers whenever the component for the current location is about to be left. Similar to <code>beforeRouteLeave</code> but can be used in any component. The guard is removed when the component is unmounted.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">onBeforeRouteLeave</span><span class="token punctuation">(</span>leaveGuard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h4 id="parameters-4" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-4" aria-hidden="true">#</a></h4><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>leaveGuard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>Navigation guard to add</td></tr></tbody></table><h3 id="onbeforerouteupdate" tabindex="-1">onBeforeRouteUpdate <a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a></h3><p>Add a navigation guard that triggers whenever the current location is about to be updated. Similar to <code>beforeRouteUpdate</code> but can be used in any component. The guard is removed when the component is unmounted.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">onBeforeRouteUpdate</span><span class="token punctuation">(</span>updateGuard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h4 id="parameters-5" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-5" aria-hidden="true">#</a></h4><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>updateGuard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>Navigation guard to add</td></tr></tbody></table><h3 id="uselink" tabindex="-1">useLink <a class="header-anchor" href="#uselink" aria-hidden="true">#</a></h3><p>Returns everything exposed by the <a href="#router-link-s-v-slot"><code>v-slot</code> API</a>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">useLink</span><span class="token punctuation">(</span>props<span class="token operator">:</span> RouterLinkOptions<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  route<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span>RouteLocationNormalized <span class="token operator">&amp;</span> <span class="token punctuation">{</span> href<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  href<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  isActive<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  isExactActive<span class="token operator">:</span> ComputedRef<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
  <span class="token function-variable function">navigate</span><span class="token operator">:</span> <span class="token punctuation">(</span>event<span class="token operator">?</span><span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">Promise</span><span class="token punctuation">(</span>NavigationFailure <span class="token operator">|</span> <span class="token keyword">void</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="parameters-6" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-6" aria-hidden="true">#</a></h4><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>props</td><td><code>RouterLinkOptions</code></td><td>props object that can be passed to <code>&lt;router-link&gt;</code>. Accepts <code>Ref</code>s and <code>ComputedRef</code>s</td></tr></tbody></table><h3 id="useroute" tabindex="-1">useRoute <a class="header-anchor" href="#useroute" aria-hidden="true">#</a></h3><p>Returns the current route location. Equivalent to using <code>$route</code> inside templates. Must be called inside of <code>setup()</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> RouteLocationNormalized
</code></pre></div><h3 id="userouter" tabindex="-1">useRouter <a class="header-anchor" href="#userouter" aria-hidden="true">#</a></h3><p>Returns the <a href="#router-properties">router</a> instance. Equivalent to using <code>$router</code> inside templates. Must be called inside of <code>setup()</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token keyword">export</span> <span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Router
</code></pre></div><h2 id="typescript" tabindex="-1">TypeScript <a class="header-anchor" href="#typescript" aria-hidden="true">#</a></h2><p>Here are some of the interfaces and types used by Vue Router. The documentation references them to give you an idea of the existing properties in objects.</p><h2 id="router-properties" tabindex="-1">Router Properties <a class="header-anchor" href="#router-properties" aria-hidden="true">#</a></h2><h3 id="currentroute" tabindex="-1">currentRoute <a class="header-anchor" href="#currentroute" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocationnormalized"><code>Ref&lt;RouteLocationNormalized&gt;</code></a></p></li><li><p><strong>Details</strong>:</p><p>Current route location. Readonly.</p></li></ul><h3 id="options" tabindex="-1">options <a class="header-anchor" href="#options" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routeroptions"><code>RouterOptions</code></a></p></li><li><p><strong>Details</strong>:</p><p>Original options object passed to create the Router. Readonly.</p></li></ul><h2 id="router-methods" tabindex="-1">Router Methods <a class="header-anchor" href="#router-methods" aria-hidden="true">#</a></h2><h3 id="addroute" tabindex="-1">addRoute <a class="header-anchor" href="#addroute" aria-hidden="true">#</a></h3><p>Add a new <a href="#routerecordraw">Route Record</a> as the child of an existing route. If the route has a <code>name</code> and there is already an existing one with the same one, it removes it first.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">addRoute</span><span class="token punctuation">(</span>parentName<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">symbol</span><span class="token punctuation">,</span> route<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>parentName</td><td><code>string | symbol</code></td><td>Parent Route Record where <code>route</code> should be appended at</td></tr><tr><td>route</td><td><a href="#routerecordraw"><code>RouteRecordRaw</code></a></td><td>Route Record to add</td></tr></tbody></table><h3 id="addroute-1" tabindex="-1">addRoute <a class="header-anchor" href="#addroute-1" aria-hidden="true">#</a></h3><p>Add a new <a href="#routerecordraw">route record</a> to the router. If the route has a <code>name</code> and there is already an existing one with the same one, it removes it first.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">addRoute</span><span class="token punctuation">(</span>route<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>route</td><td><a href="#routerecordraw"><code>RouteRecordRaw</code></a></td><td>Route Record to add</td></tr></tbody></table><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Note adding routes does not trigger a new navigation, meaning that the added route will not be displayed unless a new navigation is triggered.</p></div><h3 id="aftereach" tabindex="-1">afterEach <a class="header-anchor" href="#aftereach" aria-hidden="true">#</a></h3><p>Add a navigation hook that is executed after every navigation. Returns a function that removes the registered hook.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">afterEach</span><span class="token punctuation">(</span>guard<span class="token operator">:</span> NavigationHookAfter<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>guard</td><td><code>NavigationHookAfter</code></td><td>navigation hook to add</td></tr></tbody></table><h4 id="examples-2" tabindex="-1">Examples <a class="header-anchor" href="#examples-2" aria-hidden="true">#</a></h4><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> failure</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNavigationFailure</span><span class="token punctuation">(</span>failure<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;failed navigation&#39;</span><span class="token punctuation">,</span> failure<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="back" tabindex="-1">back <a class="header-anchor" href="#back" aria-hidden="true">#</a></h3><p>Go back in history if possible by calling <code>history.back()</code>. Equivalent to <code>router.go(-1)</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h3 id="beforeeach" tabindex="-1">beforeEach <a class="header-anchor" href="#beforeeach" aria-hidden="true">#</a></h3><p>Add a navigation guard that executes before any navigation. Returns a function that removes the registered guard.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">beforeEach</span><span class="token punctuation">(</span>guard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>guard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>navigation guard to add</td></tr></tbody></table><h3 id="beforeresolve" tabindex="-1">beforeResolve <a class="header-anchor" href="#beforeresolve" aria-hidden="true">#</a></h3><p>Add a navigation guard that executes before navigation is about to be resolved. At this state all component have been fetched and other navigation guards have been successful. Returns a function that removes the registered guard.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">beforeResolve</span><span class="token punctuation">(</span>guard<span class="token operator">:</span> NavigationGuard<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>guard</td><td><a href="#navigationguard"><code>NavigationGuard</code></a></td><td>navigation guard to add</td></tr></tbody></table><h4 id="examples-3" tabindex="-1">Examples <a class="header-anchor" href="#examples-3" aria-hidden="true">#</a></h4><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">beforeResolve</span><span class="token punctuation">(</span><span class="token parameter">to</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>requiresAuth <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>isAuthenticated<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="forward" tabindex="-1">forward <a class="header-anchor" href="#forward" aria-hidden="true">#</a></h3><p>Go forward in history if possible by calling <code>history.forward()</code>. Equivalent to <code>router.go(1)</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><h3 id="getroutes" tabindex="-1">getRoutes <a class="header-anchor" href="#getroutes" aria-hidden="true">#</a></h3><p>Get a full list of all the <a href="#routerecord">route records</a>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">getRoutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> RouteRecord<span class="token punctuation">[</span><span class="token punctuation">]</span>
</code></pre></div><h3 id="go" tabindex="-1">go <a class="header-anchor" href="#go" aria-hidden="true">#</a></h3><p>Allows you to move forward or backward through the history.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">go</span><span class="token punctuation">(</span>delta<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>delta</td><td><code>number</code></td><td>The position in the history to which you want to move, relative to the current page</td></tr></tbody></table><h3 id="hasroute" tabindex="-1">hasRoute <a class="header-anchor" href="#hasroute" aria-hidden="true">#</a></h3><p>Checks if a route with a given name exists</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">hasRoute</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">symbol</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td><code>string | symbol</code></td><td>Name of the route to check</td></tr></tbody></table><h3 id="isready" tabindex="-1">isReady <a class="header-anchor" href="#isready" aria-hidden="true">#</a></h3><p>Returns a Promise that resolves when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route. If the initial navigation already happened, the promise resolves immediately.This is useful in server-side rendering to ensure consistent output on both the server and the client. Note that on server side, you need to manually push the initial location while on client side, the router automatically picks it up from the URL.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">isReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token keyword">void</span><span class="token operator">&gt;</span>
</code></pre></div><h3 id="onerror" tabindex="-1">onError <a class="header-anchor" href="#onerror" aria-hidden="true">#</a></h3><p>Adds an error handler that is called every time a non caught error happens during navigation. This includes errors thrown synchronously and asynchronously, errors returned or passed to <code>next</code> in any navigation guard, and errors occurred when trying to resolve an async component that is required to render a route.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">onError</span><span class="token punctuation">(</span><span class="token function-variable function">handler</span><span class="token operator">:</span> <span class="token punctuation">(</span>error<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> to<span class="token operator">:</span> RouteLocationNormalized<span class="token punctuation">,</span> from<span class="token operator">:</span> RouteLocationNormalized<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>handler</td><td><code>(error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) =&gt; any</code></td><td>error handler to register</td></tr></tbody></table><h3 id="push" tabindex="-1">push <a class="header-anchor" href="#push" aria-hidden="true">#</a></h3><p>Programmatically navigate to a new URL by pushing an entry in the history stack.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">push</span><span class="token punctuation">(</span>to<span class="token operator">:</span> RouteLocationRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>NavigationFailure <span class="token operator">|</span> <span class="token keyword">void</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>to</td><td><a href="#routelocationraw"><code>RouteLocationRaw</code></a></td><td>Route location to navigate to</td></tr></tbody></table><h3 id="removeroute" tabindex="-1">removeRoute <a class="header-anchor" href="#removeroute" aria-hidden="true">#</a></h3><p>Remove an existing route by its name.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">removeRoute</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">symbol</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td><code>string | symbol</code></td><td>Name of the route to remove</td></tr></tbody></table><h3 id="replace-1" tabindex="-1">replace <a class="header-anchor" href="#replace-1" aria-hidden="true">#</a></h3><p>Programmatically navigate to a new URL by replacing the current entry in the history stack.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">replace</span><span class="token punctuation">(</span>to<span class="token operator">:</span> RouteLocationRaw<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>NavigationFailure <span class="token operator">|</span> <span class="token keyword">void</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>to</td><td><a href="#routelocationraw"><code>RouteLocationRaw</code></a></td><td>Route location to navigate to</td></tr></tbody></table><h3 id="resolve" tabindex="-1">resolve <a class="header-anchor" href="#resolve" aria-hidden="true">#</a></h3><p>Returns the <a href="#routelocation">normalized version</a> of a <a href="#routelocationraw">route location</a>. Also includes an <code>href</code> property that includes any existing <code>base</code>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code><span class="token function">resolve</span><span class="token punctuation">(</span>to<span class="token operator">:</span> RouteLocationRaw<span class="token punctuation">)</span><span class="token operator">:</span> RouteLocation <span class="token operator">&amp;</span> <span class="token punctuation">{</span>
  href<span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span>
</code></pre></div><p><em>Parameters</em></p><table><thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>to</td><td><a href="#routelocationraw"><code>RouteLocationRaw</code></a></td><td>Raw route location to resolve</td></tr></tbody></table><h2 id="routeroptions" tabindex="-1">RouterOptions <a class="header-anchor" href="#routeroptions" aria-hidden="true">#</a></h2><h3 id="history" tabindex="-1">history <a class="header-anchor" href="#history" aria-hidden="true">#</a></h3><p>History implementation used by the router. Most web applications should use <code>createWebHistory</code> but it requires the server to be properly configured. You can also use a <em>hash</em> based history with <code>createWebHashHistory</code> that does not require any configuration on the server but isn&#39;t handled at all by search engines and does poorly on SEO.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>history<span class="token operator">:</span> RouterHistory
</code></pre></div><h4 id="examples-4" tabindex="-1">Examples <a class="header-anchor" href="#examples-4" aria-hidden="true">#</a></h4><div class="language-js"><pre><code><span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token comment">// other options...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="linkactiveclass" tabindex="-1">linkActiveClass <a class="header-anchor" href="#linkactiveclass" aria-hidden="true">#</a></h3><p>Default class applied to active <a href="#router-link-props">RouterLink</a>. If none is provided, <code>router-link-active</code> will be applied.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>linkActiveClass<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</code></pre></div><h3 id="linkexactactiveclass" tabindex="-1">linkExactActiveClass <a class="header-anchor" href="#linkexactactiveclass" aria-hidden="true">#</a></h3><p>Default class applied to exact active <a href="#router-link-props">RouterLink</a>. If none is provided, <code>router-link-exact-active</code> will be applied.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>linkExactActiveClass<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
</code></pre></div><h3 id="parsequery" tabindex="-1">parseQuery <a class="header-anchor" href="#parsequery" aria-hidden="true">#</a></h3><p>Custom implementation to parse a query. Must decode query keys and values. See its counterpart, <a href="#stringifyquery">stringifyQuery</a>.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>parseQuery<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>searchQuery<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token operator">&gt;</span>
</code></pre></div><h4 id="examples-5" tabindex="-1">Examples <a class="header-anchor" href="#examples-5" aria-hidden="true">#</a></h4><p>Let&#39;s say you want to use the package <a href="javascript:;" target="_blank" rel="noopener noreferrer">qs</a> to parse queries, you can provide both <code>parseQuery</code> and <code>stringifyQuery</code>:</p><div class="language-js"><pre><code><span class="token keyword">import</span> qs <span class="token keyword">from</span> <span class="token string">&#39;qs&#39;</span>

<span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// other options...</span>
  <span class="token literal-property property">parseQuery</span><span class="token operator">:</span> qs<span class="token punctuation">.</span>parse<span class="token punctuation">,</span>
  <span class="token literal-property property">stringifyQuery</span><span class="token operator">:</span> qs<span class="token punctuation">.</span>stringify<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="routes" tabindex="-1">routes <a class="header-anchor" href="#routes" aria-hidden="true">#</a></h3><p>Initial list of routes that should be added to the router.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>routes<span class="token operator">:</span> RouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span>
</code></pre></div><h3 id="scrollbehavior" tabindex="-1">scrollBehavior <a class="header-anchor" href="#scrollbehavior" aria-hidden="true">#</a></h3><p>Function to control scrolling when navigating between pages. Can return a Promise to delay when the scrolling happens. See <a href="scroll-behavior1.html">Scroll Behaviour</a> for more details.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>scrollBehavior<span class="token operator">?</span><span class="token operator">:</span> RouterScrollBehavior
</code></pre></div><h4 id="examples-6" tabindex="-1">Examples <a class="header-anchor" href="#examples-6" aria-hidden="true">#</a></h4><div class="language-js"><pre><code><span class="token keyword">function</span> <span class="token function">scrollBehavior</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> savedPosition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// `to` and `from` are both route locations</span>
  <span class="token comment">// `savedPosition` can be null if there isn&#39;t one</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="stringifyquery" tabindex="-1">stringifyQuery <a class="header-anchor" href="#stringifyquery" aria-hidden="true">#</a></h3><p>Custom implementation to stringify a query object. Should not prepend a leading <code>?</code>. Should properly encode query keys and values. <a href="#parsequery">parseQuery</a> counterpart to handle query parsing.</p><p><strong>Signature:</strong></p><div class="language-typescript"><pre><code>stringifyQuery<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>
  query<span class="token operator">:</span> Record<span class="token operator">&lt;</span>
    <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
    <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span>
</code></pre></div><h2 id="routerecordraw" tabindex="-1">RouteRecordRaw <a class="header-anchor" href="#routerecordraw" aria-hidden="true">#</a></h2><p>Route record that can be provided by the user when adding routes via the <a href="#routeroptions"><code>routes</code> option</a> or via <a href="#addroute-2"><code>router.addRoute()</code></a>. There are three different kind of route records:</p><ul><li>Single views records: have a <code>component</code> option</li><li>Multiple views records (<a href="named-views1.html">named views</a>): have a <code>components</code> option</li><li>Redirect records: cannot have <code>component</code> or <code>components</code> option because a redirect record is never reached.</li></ul><h3 id="path" tabindex="-1">path <a class="header-anchor" href="#path" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Details</strong>:</p><p>Path of the record. Should start with <code>/</code> unless the record is the child of another record. Can define parameters: <code>/users/:id</code> matches <code>/users/1</code> as well as <code>/users/posva</code>.</p></li><li><p><strong>See Also</strong>: <a href="dynamic-matching1.html">Dynamic Route Matching</a></p></li></ul><h3 id="redirect" tabindex="-1">redirect <a class="header-anchor" href="#redirect" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>RouteLocationRaw | (to: RouteLocationNormalized) =&gt; RouteLocationRaw</code> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Where to redirect if the route is directly matched. The redirection happens before any navigation guard and triggers a new navigation with the new target location. Can also be a function that receives the target route location and returns the location we should redirect to.</p></li></ul><h3 id="children" tabindex="-1">children <a class="header-anchor" href="#children" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: Array of <a href="#routerecordraw"><code>RouteRecordRaw</code></a> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Nested routes of the current record.</p></li><li><p><strong>See Also</strong>: <a href="nested-routes1.html">Nested Routes</a></p></li></ul><h3 id="alias" tabindex="-1">alias <a class="header-anchor" href="#alias" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string | string[]</code> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Aliases for the route. Allows defining extra paths that will behave like a copy of the record. This enables paths shorthands like <code>/users/:id</code> and <code>/u/:id</code>. <strong>All <code>alias</code> and <code>path</code> values must share the same params</strong>.</p></li></ul><h3 id="name-1" tabindex="-1">name <a class="header-anchor" href="#name-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string | symbol</code> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Unique name for the route record.</p></li></ul><h3 id="beforeenter" tabindex="-1">beforeEnter <a class="header-anchor" href="#beforeenter" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#navigationguard"><code>NavigationGuard | NavigationGuard[]</code></a> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Before enter guard specific to this record. Note <code>beforeEnter</code> has no effect if the record has a <code>redirect</code> property.</p></li></ul><h3 id="props" tabindex="-1">props <a class="header-anchor" href="#props" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>boolean | Record&lt;string, any&gt; | (to: RouteLocationNormalized) =&gt; Record&lt;string, any&gt;</code> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Allows passing down params as props to the component rendered by <code>router-view</code>. When passed to a <em>multiple views record</em>, it should be an object with the same keys as <code>components</code> or a <code>boolean</code> to be applied to each component. target location.</p></li><li><p><strong>See Also</strong>: <a href="passing-props1.html">Passing props to Route Components</a></p></li></ul><h3 id="sensitive" tabindex="-1">sensitive <a class="header-anchor" href="#sensitive" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>boolean</code> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Makes the route matching case sensitive, defaults to <code>false</code>. Note this can also be set at a route level.</p></li></ul><h3 id="strict" tabindex="-1">strict <a class="header-anchor" href="#strict" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>boolean</code> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Strictly checks the presence or absence of a trailing slash (<code>/</code>) at the end of the path. Defaults to <code>false</code> meaning that by default a route <code>/users</code> matches both <code>/users</code> and <code>/users/</code>. Note this can also be set at a route level.</p></li></ul><h3 id="meta" tabindex="-1">meta <a class="header-anchor" href="#meta" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routemeta"><code>RouteMeta</code></a> (Optional)</p></li><li><p><strong>Details</strong>:</p><p>Custom data attached to the record.</p></li><li><p><strong>See Also</strong>: <a href="meta1.html">Meta fields</a></p></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>If you want to use a functional component, make sure to add a <code>displayName</code> to it.</p><p>For example:</p><div class="language-js"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">HomeView</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">&#39;div&#39;</span><span class="token punctuation">,</span> <span class="token string">&#39;HomePage&#39;</span><span class="token punctuation">)</span>
<span class="token comment">// in TypeScript, you will need to use the FunctionalComponent type</span>
HomeView<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token string">&#39;HomeView&#39;</span>
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> HomeView <span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre></div></div><h2 id="routerecordnormalized" tabindex="-1">RouteRecordNormalized <a class="header-anchor" href="#routerecordnormalized" aria-hidden="true">#</a></h2><p>Normalized version of a <a href="#routerecordraw">Route Record</a></p><h3 id="aliasof" tabindex="-1">aliasOf <a class="header-anchor" href="#aliasof" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>RouteRecordNormalized | undefined</code></p></li><li><p><strong>Details</strong>:</p><p>Defines if this record is the alias of another one. This property is <code>undefined</code> if the record is the original one.</p></li></ul><h3 id="beforeenter-1" tabindex="-1">beforeEnter <a class="header-anchor" href="#beforeenter-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#navigationguard"><code>NavigationGuard</code></a></p></li><li><p><strong>Details</strong>:</p><p>Navigation guard applied when entering this record from somewhere else.</p></li><li><p><strong>See Also</strong>: <a href="navigation-guards1.html">Navigation guards</a></p></li></ul><h3 id="children-1" tabindex="-1">children <a class="header-anchor" href="#children-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: Array of normalized <a href="#routerecordnormalized">route records</a></p></li><li><p><strong>Details</strong>:</p><p>Children route records of a route at the time it was added. Empty array if none. Note this array doesn&#39;t update when <code>addRoute()</code> and <code>removeRoute()</code> are called.</p></li></ul><h3 id="components" tabindex="-1">components <a class="header-anchor" href="#components" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>Record&lt;string, Component&gt;</code></p></li><li><p><strong>Details</strong>:</p><p>Dictionary of named views, if none, contains an object with the key <code>default</code>.</p></li></ul><h3 id="meta-1" tabindex="-1">meta <a class="header-anchor" href="#meta-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>RouteMeta</code></p></li><li><p><strong>Details</strong>:</p><p>Arbitrary data attached to the record.</p></li><li><p><strong>See also</strong>: <a href="meta1.html">Meta fields</a></p></li></ul><h3 id="name-2" tabindex="-1">name <a class="header-anchor" href="#name-2" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string | symbol | undefined</code></p></li><li><p><strong>Details</strong>:</p><p>Name for the route record. <code>undefined</code> if none was provided.</p></li></ul><h3 id="path-1" tabindex="-1">path <a class="header-anchor" href="#path-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Details</strong>:</p><p>Normalized path of the record. Includes any parent&#39;s <code>path</code>.</p></li></ul><h3 id="props-1" tabindex="-1">props <a class="header-anchor" href="#props-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>Record&lt;string, boolean | Function | Record&lt;string, any&gt;&gt;</code></p></li><li><p><strong>Details</strong>:</p><p>Dictionary of the <a href="#props"><code>props</code> option</a> for each named view. If none, it will contain only one property named <code>default</code>.</p></li></ul><h3 id="redirect-1" tabindex="-1">redirect <a class="header-anchor" href="#redirect-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocationraw"><code>RouteLocationRaw</code></a></p></li><li><p><strong>Details</strong>:</p><p>Where to redirect if the route is directly matched. The redirection happens before any navigation guard and triggers a new navigation with the new target location.</p></li></ul><h2 id="routelocationraw" tabindex="-1">RouteLocationRaw <a class="header-anchor" href="#routelocationraw" aria-hidden="true">#</a></h2><p>User-level route location that can be passed to <code>router.push()</code>, <code>redirect</code>, and returned in <a href="navigation-guards1.html">Navigation Guards</a>.</p><p>A raw location can either be a <code>string</code> like <code>/users/posva#bio</code> or an object:</p><div class="language-js"><pre><code><span class="token comment">// these three forms are equivalent</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&#39;/users/posva#bio&#39;</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/users/posva&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;users&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;posva&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// only change the hash</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// only change query</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token string">&#39;2&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// change one param</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">&#39;jolyne&#39;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>Note <code>path</code> must be provided encoded (e.g. <code>phantom blood</code> becomes <code>phantom%20blood</code>) while <code>params</code>, <code>query</code> and <code>hash</code> must not, they are encoded by the router.</p><p>Raw route locations also support an extra option <code>replace</code> to call <code>router.replace()</code> instead of <code>router.push()</code> in navigation guards. Note this also internally calls <code>router.replace()</code> even when calling <code>router.push()</code>:</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">replace</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// equivalent to</span>
router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">&#39;#bio&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="routelocation" tabindex="-1">RouteLocation <a class="header-anchor" href="#routelocation" aria-hidden="true">#</a></h2><p>Resolved <a href="#routelocationraw">RouteLocationRaw</a> that can contain <a href="#routerecordraw">redirect records</a>. Apart from that it has the same properties as <a href="#routelocationnormalized">RouteLocationNormalized</a>.</p><h2 id="routelocationnormalized" tabindex="-1">RouteLocationNormalized <a class="header-anchor" href="#routelocationnormalized" aria-hidden="true">#</a></h2><p>Normalized route location. Does not have any <a href="#routerecordraw">redirect records</a>. In navigation guards, <code>to</code> and <code>from</code> are always of this type.</p><h3 id="fullpath" tabindex="-1">fullPath <a class="header-anchor" href="#fullpath" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Details</strong>:</p><p>Encoded URL associated to the route location. Contains <code>path</code>, <code>query</code> and <code>hash</code>.</p></li></ul><h3 id="hash" tabindex="-1">hash <a class="header-anchor" href="#hash" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Details</strong>:</p><p>Decoded <code>hash</code> section of the URL. Always starts with a <code>#</code>. Empty string if there is no <code>hash</code> in the URL.</p></li></ul><h3 id="query" tabindex="-1">query <a class="header-anchor" href="#query" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>Record&lt;string, string | string[]&gt;</code></p></li><li><p><strong>Details</strong>:</p><p>Dictionary of decoded query params extracted from the <code>search</code> section of the URL.</p></li></ul><h3 id="matched" tabindex="-1">matched <a class="header-anchor" href="#matched" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routerecordnormalized"><code>RouteRecordNormalized[]</code></a></p></li><li><p><strong>Details</strong>:</p><p>Array of <a href="#routerecord">normalized route records</a> that were matched with the given route location.</p></li></ul><h3 id="meta-2" tabindex="-1">meta <a class="header-anchor" href="#meta-2" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>RouteMeta</code></p></li><li><p><strong>Details</strong>:</p><p>Arbitrary data attached to all matched records merged (non recursively) from parent to child.</p></li><li><p><strong>See also</strong>: <a href="meta1.html">Meta fields</a></p></li></ul><h3 id="name-3" tabindex="-1">name <a class="header-anchor" href="#name-3" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string | symbol | undefined | null</code></p></li><li><p><strong>Details</strong>:</p><p>Name for the route record. <code>undefined</code> if none was provided.</p></li></ul><h3 id="params" tabindex="-1">params <a class="header-anchor" href="#params" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>Record&lt;string, string | string[]&gt;</code></p></li><li><p><strong>Details</strong>:</p><p>Dictionary of decoded params extracted from <code>path</code>.</p></li></ul><h3 id="path-2" tabindex="-1">path <a class="header-anchor" href="#path-2" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <code>string</code></p></li><li><p><strong>Details</strong>:</p><p>Encoded <code>pathname</code> section of the URL associated to the route location.</p></li></ul><h3 id="redirectedfrom" tabindex="-1">redirectedFrom <a class="header-anchor" href="#redirectedfrom" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocation"><code>RouteLocation</code></a></p></li><li><p><strong>Details</strong>:</p><p>Route location we were initially trying to access before ending up on the current location when a <code>redirect</code> option was found or a navigation guard called <code>next()</code> with a route location. <code>undefined</code> if there was no redirection.</p></li></ul><h2 id="navigationfailure" tabindex="-1">NavigationFailure <a class="header-anchor" href="#navigationfailure" aria-hidden="true">#</a></h2><h3 id="from" tabindex="-1">from <a class="header-anchor" href="#from" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>Details</strong>:</p><p>Route location we were navigating from</p></li></ul><h3 id="to-1" tabindex="-1">to <a class="header-anchor" href="#to-1" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a></p></li><li><p><strong>Details</strong>:</p><p>Route location we were navigating to</p></li></ul><h3 id="type" tabindex="-1">type <a class="header-anchor" href="#type" aria-hidden="true">#</a></h3><ul><li><p><strong>Type</strong>: <a href="#navigationfailuretype"><code>NavigationFailureType</code></a></p></li><li><p><strong>Details</strong>:</p><p>Type of the navigation failure.</p></li><li><p><strong>See Also</strong>: <a href="navigation-failures1.html">Navigation Failures</a></p></li></ul><h2 id="navigationguard" tabindex="-1">NavigationGuard <a class="header-anchor" href="#navigationguard" aria-hidden="true">#</a></h2><ul><li><p><strong>Arguments</strong>:</p><ul><li><a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a> to - Route location we are navigating to</li><li><a href="#routelocationnormalized"><code>RouteLocationNormalized</code></a> from - Route location we are navigating from</li><li><code>Function</code> next (Optional) - Callback to validate the navigation</li></ul></li><li><p><strong>Details</strong>:</p><p>Function that can be passed to control a router navigation. The <code>next</code> callback can be omitted if you return a value (or a Promise) instead, which is encouraged. Possible return values (and parameters for <code>next</code>) are:</p><ul><li><code>undefined | void | true</code>: validates the navigation</li><li><code>false</code>: cancels the navigation</li><li><a href="#routelocationraw"><code>RouteLocationRaw</code></a>: redirects to a different location</li><li><code>(vm: ComponentPublicInstance) =&gt; any</code> <strong>only for <code>beforeRouteEnter</code></strong>: A callback to be executed once the navigation completes. Receives the route component instance as the parameter.</li></ul></li><li><p><strong>See Also</strong>: <a href="navigation-guards1.html">Navigation Guards</a></p></li></ul><h2 id="component-injections" tabindex="-1">Component Injections <a class="header-anchor" href="#component-injections" aria-hidden="true">#</a></h2><h3 id="component-injected-properties" tabindex="-1">Component Injected Properties <a class="header-anchor" href="#component-injected-properties" aria-hidden="true">#</a></h3><p>These properties are injected into every child component by calling <code>app.use(router)</code>.</p><ul><li><p><strong>this.$router</strong></p><p>The router instance.</p></li><li><p><strong>this.$route</strong></p><p>The current active <a href="#routelocationnormalized">route location</a>. This property is read-only and its properties are immutable, but it can be watched.</p></li></ul><h3 id="component-enabled-options" tabindex="-1">Component Enabled Options <a class="header-anchor" href="#component-enabled-options" aria-hidden="true">#</a></h3><ul><li><strong>beforeRouteEnter</strong></li><li><strong>beforeRouteUpdate</strong></li><li><strong>beforeRouteLeave</strong></li></ul><p>See <a href="navigation-guards1.html#in-component-guards">In Component Guards</a>.</p></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Suggest changes to this page <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><!----></div></footer><!----><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17=""><div class="bsa-cpc" data-v-4ce5ad17=""></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"d2104c47\",\"guide_advanced_composition-api.md\":\"c4a35a0b\",\"guide_advanced_data-fetching.md\":\"b840e67c\",\"guide_advanced_dynamic-routing.md\":\"652f0e44\",\"guide_advanced_extending-router-link.md\":\"9af8914a\",\"guide_advanced_lazy-loading.md\":\"8d710c99\",\"guide_advanced_meta.md\":\"a024ec3d\",\"guide_advanced_navigation-failures.md\":\"57e1a0e2\",\"guide_advanced_navigation-guards.md\":\"7d263b2b\",\"guide_advanced_scroll-behavior.md\":\"84f7daa3\",\"guide_advanced_transitions.md\":\"85553476\",\"guide_essentials_dynamic-matching.md\":\"fa6babaa\",\"guide_essentials_history-mode.md\":\"56f164ed\",\"guide_essentials_named-routes.md\":\"94d29abc\",\"guide_essentials_named-views.md\":\"c0d13d46\",\"guide_essentials_navigation.md\":\"c1db3764\",\"guide_essentials_nested-routes.md\":\"0c92c29e\",\"guide_essentials_passing-props.md\":\"c283ba51\",\"guide_essentials_redirect-and-alias.md\":\"ff823362\",\"guide_essentials_route-matching-syntax.md\":\"8d709abb\",\"guide_index.md\":\"adc6171f\",\"guide_migration_index.md\":\"b3d45cf2\",\"index.md\":\"58761df1\",\"installation.md\":\"80dcd302\",\"introduction.md\":\"e6a9eb47\",\"zh_api_index.md\":\"9540fde2\",\"zh_guide_advanced_composition-api.md\":\"c9cfee63\",\"zh_guide_advanced_data-fetching.md\":\"c83aef48\",\"zh_guide_advanced_dynamic-routing.md\":\"10e27a0f\",\"zh_guide_advanced_extending-router-link.md\":\"4de5dd4e\",\"zh_guide_advanced_lazy-loading.md\":\"bc3ba5ac\",\"zh_guide_advanced_meta.md\":\"9802cc2e\",\"zh_guide_advanced_navigation-failures.md\":\"02c8440d\",\"zh_guide_advanced_navigation-guards.md\":\"2c59c5ad\",\"zh_guide_advanced_scroll-behavior.md\":\"22a11e87\",\"zh_guide_advanced_transitions.md\":\"f4039441\",\"zh_guide_essentials_dynamic-matching.md\":\"e6594e44\",\"zh_guide_essentials_history-mode.md\":\"beb89b31\",\"zh_guide_essentials_named-routes.md\":\"66c05082\",\"zh_guide_essentials_named-views.md\":\"9aae5c1b\",\"zh_guide_essentials_navigation.md\":\"c0faee1f\",\"zh_guide_essentials_nested-routes.md\":\"e1852582\",\"zh_guide_essentials_passing-props.md\":\"030d2081\",\"zh_guide_essentials_redirect-and-alias.md\":\"ea0856be\",\"zh_guide_essentials_route-matching-syntax.md\":\"e907166f\",\"zh_guide_index.md\":\"bb134cde\",\"zh_guide_migration_index.md\":\"c448fcd8\",\"zh_index.md\":\"90ac17e3\",\"zh_installation.md\":\"7a5d9568\",\"zh_introduction.md\":\"6a2f4e36\"}")</script>
    <script type="module" async="" src="static/js/app.47b74ea6.js"></script>
    
  </body>
</html>